// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

const ThemeContext = React.createContext();
console.log(ThemeContext)
class Header extends React.Component {

  // 方式一:通过静态的 contextType 获取 ThemeContext.Provider 提供的的属性 value 值, 
  // 直接通过 this.context 就可以拿到,
  static contextType = ThemeContext;

  render() {
    return (
      <div style={{
          margin: '10px',
          padding: '10px',
          border: `5px solid ${this.context.color}`
        }}
      >
        Header
        <Title/>
      </div>
    )
  }
}

class Title extends React.Component {

  // 方式二:通过 ThemeContext.Consumer 获取 ThemeContext.Provider 提供的的属性 value 值, 

  render() {
    return (
      <ThemeContext.Consumer>
        {
          (value) => (
            <div style={{
                margin: '10px',
                padding: '10px',
                border: `5px solid ${value.color}`
              }}
            >
              Title
            </div>
          )
        }
      </ThemeContext.Consumer>
    )
  }
}

class Main extends React.Component {

  // 方式一:通过静态的 contextType 获取 ThemeContext.Provider 提供的的属性 value 值, 
  // 直接通过 this.context 就可以拿到,
  static contextType = ThemeContext;

  render() {
    return (
      <div style={{
          margin: '10px',
          padding: '10px',
          border: `5px solid ${this.context.color}`
        }}
      >
        Main
        <Content/>
      </div>
    )
  }
}

class Content extends React.Component {

  // 方式二:通过 ThemeContext.Consumer 获取 ThemeContext.Provider 提供的的属性 value 值, 

  render() {
    return (
      <ThemeContext.Consumer>
        {
          (value) => (
            <div style={{
                margin: '10px',
                padding: '10px',
                border: `5px solid ${value.color}`
              }}
            >
              Content
              <div style={{float: 'right'}}>
                <button onClick={() => value.changeColor('red')}>红</button>
                <button onClick={() => value.changeColor('green')}>绿</button>
              </div>
            </div>
          )
        }
      </ThemeContext.Consumer>
    )
  }
}

class Page extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
  }

  changeColor = (color) => {
    this.setState({color});
  }

  render() {
    const contextVal = {
      changeColor: this.changeColor,
      color: this.state.color
    }
    return (
      <ThemeContext.Provider value={contextVal}>
        <div style={{
            margin: '10px',
            padding: '10px',
            width: '280px',
            border: `5px solid ${this.state.color}`
          }}
        >
          Page
          <Header />
          <Main />
        </div>
      </ThemeContext.Provider>
    );
  }
}


ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",